<template>
  <view class="register">
    <form class="regform">
      <view class="reginput">
        <input
          placeholder="请输入您的手机号"
          v-model="data.phoneNum"
          @change="verify(data.phoneNum)"
        />
      </view>
      <text>{{ txt }} </text>
      <view class="regpass">
        <input placeholder="请输入密码" v-model="data.userPad" />
      </view>
      <view class="test">
        <input placeholder="请输入验证码" v-model="data.code" />
        <view @click="verification(data.phoneNum) "><button :disabled='disabled||lock' class="lock">
		<text>发送验证码</text>
		<!-- <u-count-down v-else ref="uCountDown" :show-hours='false' :timestamp="timestamp" @change="change"></u-count-down> -->
		</button></view>
      </view>
      <button class="btn" type="warn" form-type="submit" @click="register(data)" :disabled='disabled'>注册</button>
    </form>
    <view class="tip">
      <text>注册后自动登录账号</text>
    </view>
	<!-- 连接超时 -->
	<u-toast ref="uToast" />
	<!-- 注册成 -->
	<u-toast ref="uToasts" />
	
  </view>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("user");
export default {
  data() {
    return {
      data: { phoneNum: "", userPad: "" ,code:""},
      txt: "",
      disabled:0,
      lock:0,
	  // timestamp: 10,
	  // isShow:0,
    };
  },
  methods: {
    ...mapActions(["login", "telNumberChecking",'userRegister','sendCode']),
    // 注册
     async register(value) {
      const data = await this.userRegister(value);
      console.log(data);
     if (data.code==10001) {
      //  跳转
        //uni.navigateTo({url:'/pages/login/login'})
		this.$refs.uToast.show({
							title: '注册成功',
							type: 'success',
							url: '/pages/login/login'
						})
     }else{
		 this.$refs.uToast.show({
		 					title: '注册失败',
		 					type: 'error',
		 					
		 				})
	 }
    },
    // 检查号码是否注册
    async verify(phoneNum) {
      const data = await this.telNumberChecking(phoneNum);
      console.log(data);

      if (data.code==10010) {
         this.txt='手机号码必须为11位',
            this.disabled=1
      } else {
            if (data.code==10002) {
          this.txt='手机号码已注册',
            this.disabled=1
      } else {
        this.txt = '手机号码未注册，可以注册',
         this.disabled=0
      }
      }
  


    },
    // 短信验证
 async   verification(data){
	 //this.isShow=1
   let value
      console.log(data);
      if (data.length==11) {
      value=  await this.sendCode({userTel:data})
      this.lock=1
	  
      } 
    console.log(value,'短信');
    },
	// 事件触发，每秒一次
				// change(timestamp) {
				// 	console.log(timestamp);
				// 	if(timestamp==0){
				// 		this.isShow=0
				// 	}
				// },
				// // ref形式获取内部的值
				// getSeconds() {
				// 	console.log(this.$refs.uCountDown.seconds);
				// 	if(this.$refs.uCountDown.seconds==0){
				// 		this.isShow=0
				// 	}
				// }
  },
};
</script>

<style lang="scss" scoped>
.lock{
  height: 100rpx;
  font-size: 24rpx;
  line-height: 100rpx;
}
.register {
  height: 100vh;
  background-color: #fafafa;
  padding: 40rpx;
  box-sizing: border-box;
  padding-top: 100rpx;
  .regform {
    .reginput {
      height: 100rpx;
      background-color: #ffffff;
      margin: 30rpx 0rpx;
      line-height: 80rpx;
      border-radius: 10rpx;
      input {
        height: 100%;
      }
    }
    .regpass {
      height: 100rpx;
      background-color: #ffffff;
      margin: 30rpx 0rpx;
      line-height: 80rpx;
      border-radius: 10rpx;
      input {
        height: 100%;
      }
    }
    .test {
      height: 100rpx;
      width: 100%;
      margin: 30rpx 0rpx;
      line-height: 80rpx;
      display: flex;
      input {
        height: 100%;
        width: 70%;
        background-color: #ffffff;
        border-radius: 10rpx;
      }
      view {
        width: 30%;
        box-sizing: border-box;
        border-radius: 10rpx;
        font-size: 26rpx;
        border: 1px solid #e5e5e5;
        text-align: center;
        line-height: 100rpx;
      }
    }
  }
  .tip {
    margin-top: 20rpx;
    font-size: 24rpx;
    color: #9e9e9f;
  }
 
}
</style>
